<html>
<head>
    <title>command</title>
</head>
<body>
<style type="text/css">
    #all {
        color: #000000;
        background: #ececec;
        width: 300px;
        height: 200px;
    }

    div {
        line-height: 40px;
        text-align: right;
    }

    input {
        width: 400px;
        height: 20px;
    }

    select {
        padding: 5px 82px;
    }
</style>



<label for="API">Room:</label>
<p>
    <!-- <input type="text" name="API" id="api" value="help" rows="100"> -->
    <textarea id="room" name="API" rows="2" cols="30">1</textarea>


</p>

<label for="API">Member:</label>
<p>
    <textarea id="member" name="API" rows="2" cols="30">1,2</textarea>
</p>

<p>
    <button id="btn" style="height:50px;width:100px">Create Room</button>
</p>

<label for="Return">Return:</label>
<p>
    <textarea id="return" name="summary" rows="50" cols="120"></textarea>
</p>

</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">


    $("#btn").on("click", function () {
        var param = $("#room").val()
        var param1 = $("#member").val()


        var url1 = "http://localhost" +'/create?room='+param+'&member='+param1

        document.getElementById("return").value = "waiting result..."

        console.log(url1)
        $.ajax({
            url: url1,
            type: "GET",
            contentType: "application/json; charset=utf-8",
            //dataType: "json",

            //data: param,

            success: function (res) {
                document.getElementById("return").value = res;
            },

            error: function(xhr,textStatus){
                document.getElementById("return").value = "error, state = " + textStatus
            }
        })

    })

</script>
</html>
